<template>
  <div class="yl-container">

    <h1 style="font-size:1.5em;text-align:center;">{{title}}</h1><br>
    <h1>{{prjInfo}}</h1><br>

    <div class="yl-main">
      <!-- 搜索模块 -->
      <div class="yl-search-list">
        <el-form :model="searchConfig" ref="searchConfig" :inline="true">
          <el-form-item label="系别">
            <el-select v-model="searchConfig.department" placeholder="请选择系别" size="small">
              <el-option
                v-for="(item, index) in departments"
                :key="index"
                :value="item.label"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="申报人">
            <el-select v-model="searchConfig.uploader" placeholder="请选择申报人" size="small">
              <el-option
                v-for="(item, index) in uploaders"
                :key="index"
                :value="item.nns_account"
                :label="item.nns_name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <YlButton uiType="default" icon="el-icon-search" @click="initData(false)">搜 索</YlButton>
            <YlButton uiType="default" btnType="success" icon="iconfont yl-ecs-zhongzhi yl-icon" @click="initTable(false)">重 置</YlButton>
          </el-form-item>
        </el-form>

        <YlButton uiType="plain" btnType="danger" icon="el-icon-refresh-right" @click="initData(true)">强制刷新</YlButton>
        <YlButton uiType="plain"  icon="el-icon-download" @click="downloadFile">导出文件</YlButton>

      </div>
      <br>

      <!-- table 列表组 -->
      <div class="yl-table-list">
        <el-table
          v-loading="loading"
          element-loading-text="玩命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          border
          height="450"
          :data="tableData"
        >
          <el-table-column align="center" label="处理时间" prop="bill_occurrence_time"  show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="单类"  prop="bill_category_name"></el-table-column>

          <el-table-column align="center" label="单号" prop="bill_category_num" ></el-table-column>

          <el-table-column align="center" label="摘要" prop="bill_summary" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="经办人" prop="bill_operator" ></el-table-column>

          <el-table-column align="center" label="发生金额(元)">
            <template slot-scope="{row}">
              <span>{{ row.bill_amount_money | formatMoney('yuan') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="预算余额(元)">
            <template slot-scope="{row}">
              <span>{{  row.bill_balance_money | formatMoney('yuan') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="实际发生金额(元)">
             <template slot-scope="{row}">
              <span>{{ row.bill_actual_amount_money | formatMoney('yuan') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="实际预算余额(元)">
             <template slot-scope="{row}">
              <span>{{ row.bill_actual_balance_money | formatMoney('yuan') }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="申报人" prop="user_name"></el-table-column>

          <div class="yl-table-empty" slot="empty">
            <img src="~@/assets/icons/svg/no-data.svg">
            <div>暂无数据</div>
          </div>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

import {
  initSelectValue
} from '@/middleware'
const Base64 = require('js-base64').Base64
export default {
  data () {
    return {
      departments: [],
      uploaders: [],
      loading: false,
      // 标题
      title: '',
      // 项目信息
      prjInfo: '',
      // 下载地址
      fileUrl: '',
      // table 列表数据
      tableData: [],
      searchConfig: {
        department: '',
        uploader: ''
      },
      // 分页
      page: 1,
      size: 10,
      total: 0,
      // query信息
      query: {}
    }
  },
  created () {
    this.query = this.$route.query
    this.initTable()
  },
  methods: {
    // 列表初始化
    initTable (isForce = false) {
      this.dialogVisible = false
      this.searchConfig = this.initForm(this.searchConfig)
      this.initDepartment()
      this.initUploader()
      this.initData(isForce)
    },

    async initDepartment () {
      let data = await this.$ylapi.getDepartList()
      data = initSelectValue(data)
      this.departments = data
    },

    async initUploader () {
      let data = await this.$ylapi.getUserListSelect()
      this.uploaders = data
    },

    // 数据初始化
    async initData (isForce = false) {
      this.loading = true
      let data = await this.$ylapi.getProjectContentInfoExecuteStageStandingBook({
        'stage_id': this.query.stage_id,
        'uploader': this.searchConfig.uploader,
        'department': this.searchConfig.department,
        'refresh': isForce
      }, this.query.id)
      this.title = data.title
      this.fileUrl = data.file_url
      this.prjInfo = data.prj_info
      this.tableData = data.data
      this.loading = false
    },

    // 导出文档--二进制流
    // async downloadFile () {
    //   let { data, name } = await this.$ylapi.downloadFile({
    //     url: this.fileUrl,
    //     mode: 'json'
    //   })
    //   this.blobFile(Base64.decode(data), name)
    // },

    // 导出文档--location
    downloadFile () {
      this.locateFile(`/api/resource/download?url=` + this.fileUrl)
    },

    // 初始化
    getInitState (val) {
      if (val) {
        this.initTable(true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
